<template>
  <div id="right">
    <div class="right_bottom">
      <p class="title">推荐文章</p>
      <div id="content">
        <div class="box" @click="checkDetail" v-for="user in users">
          <h1>{{user.title}}</h1>
          <p class="name">{{user.name}}<img src="../../img/time.png"/><span>{{user.date}}</span></p>
          <p class="b_content">
            {{user.content}}
          </p>
          <span><img src="../../img/siad.png"/>{{user.command}}</span>
          <span><img src="../../img/scan.png"/>{{user.scan}}</span>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
          users:[]
      }
    },
    methods:{
      checkDetail:function(){
        this.$router.push('/details')
      },
      init:function(){
        let self=this;
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(user){
          if(xhr.readyState===4&&xhr.status===200) {
            var res=xhr.responseText;
            var obj=JSON.parse(res);
            self.users=obj.users;
          }
        };
        xhr.open('get',"https://www.easy-mock.com/mock/5a61b18441d8910ea886ec89/example/content",true);
        xhr.send(null);
      }
    },
    created:function(){
      this.init();
    }

  }
</script>

<style scoped>
  #right{
    width:100%;
    height:auto;
    float:left;
    padding-left:300px;
    padding-right:50px;
  }
  .right_bottom{
    width:100%;
    background-color: #fff8d8;
    padding-left:25px;
    padding-right:25px;
    padding-top:10px;
  }
  .title{
    width:200px;
    height:50px;
    line-height: 50px;
    background-color: #fadeb6;
    font-size:25px;
    border-radius: 15px;
    padding-left:15px;
  }
  #content{
    height:800px;
  }
  .name{
    font-size:18px;
  }
  .name span{
    font-size: 15px;
  }
  img{
    width:15px;
    height:15px;
    margin-left:5px;
    margin-right:5px;
  }
  .box{
    background-color: #fadeb6;
    width:100%;
    margin:0 auto;
    margin-top:10px;
    padding:15px;
    border-radius: 25px;
    position:relative;

  }
  .b_content{
    font-size:18px;
    width:100%;
    height:150px;
    line-height: 30px;
    overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  }
</style>
